import React,{Component} from 'react';
import 'antd/dist/antd.css'
import { Input, Button, List } from 'antd';
class TodoListUI extends Component {
    render() {
        return (

            <div style={{ marginTop: "20px", marginLeft: "20px" }}>
                <Input
                    value={this.props.inputValue}
                    onChange={this.props.handleChange}
                    style={{ width: 300, marginRight: "10px" }} />
                <Button type="primary" onClick={this.props.handleClick}>添加</Button>
                <List
                    style={{ marginTop: "10px", width: "300px" }}
                    bordered
                    dataSource={this.props.list}
                    renderItem={(item,index) => (<List.Item onClick={()=>{this.props.handleDelete(index)}}>{item}</List.Item>)}
                />
            </div>
        )
    }
}
export default TodoListUI;